<template>
  <div class="page-box">
    <!-- 工具条区域 -->
    <div class="tabbar-box">
      <el-row type="flex" justify="space-between">
        <div>
          <el-form :inline="true" class="demo-form-inline">
            <el-form-item />
          </el-form>
        </div>
        <div>
          <el-button
            type="primary"
            plain
            @click="dialogVisible = true"
          >创建角色</el-button>
        </div>
      </el-row>
    </div>

    <div class="table-box">
      <!-- <el-table
        :data="list"
        border
      >
        <el-table-column prop="permission_name" width="200px" label="菜单名称" />
        <el-table-column prop="route" width="240px" label="菜单地址" />
        <el-table-column prop="icon" width="240px" label="权限标识" />
        <el-table-column prop="" width="80px" label="图标" />
        <el-table-column prop="component" width="240px" label="组件路径" />
        <el-table-column prop="" width="80px" label="是否显示">
          <el-switch
            v-model="value"
            active-color="#13ce66"
            inactive-color="#ff4949"
          />
        </el-table-column>
        <el-table-column prop="created_at" width="240px" label="创建时间" align="center" />
        <el-table-column label="操作" width="140px" align="center">
          <template>
            <el-button type="primary" icon="el-icon-edit" size="mini" circle />
            <el-button type="warning" icon="el-icon-plus" size="mini" circle />
            <el-button type="danger" icon="el-icon-delete" size="mini" circle />
          </template>
        </el-table-column>

      </el-table> -->
      <el-table
        :data="list"
        style="width: 100%; margin-bottom: 20px"
        row-key="id"
        border
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <el-table-column
          prop="permission_name"
          width="200px"
          label="菜单名称"
        />
        <el-table-column prop="route" width="240px" label="菜单地址" />
        <el-table-column
          prop="permission_mark"
          width="240px"
          label="权限标识"
        />
        <el-table-column width="80px" prop="icon" label="图标">
          <template slot-scope="{ row }">
            <svg-icon :icon-class="row.icon + ''" />
          </template>
        </el-table-column>
        <el-table-column prop="component" width="240px" label="组件路径" />
        <el-table-column prop="" width="80px" label="是否显示">
          <el-switch v-model="valueboll" active-value="1" inactive-value="0" />
        </el-table-column>
        <el-table-column
          prop="created_at"
          width="240px"
          label="创建时间"
          align="center"
        />

        <el-table-column
          label="操作"
          width="140px"
          align="center"
          fixed="right"
        >
          <template>
            <el-button type="primary" icon="el-icon-edit" size="mini" circle />
            <el-button type="warning" icon="el-icon-plus" size="mini" circle />
            <el-button type="danger" icon="el-icon-delete" size="mini" circle />
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import { exprotList } from '@/api/menu'
export default {
  data() {
    return {
      valueboll: true,
      value: true, // 控制开关
      list: [],
      queryData: {
        permission_name: '',
        page: 1,
        limit: 10
      }
    }
  },
  created() {
    this.initdata()
  },
  methods: {
    async initdata() {
      const res = await exprotList(this.queryData)
      console.log(res, '获取表单信息')
      this.list = res.data
    }
  }
}
</script>
<style lang="scss" scoped>
.page-box {
  padding: 20px;
  .tabbar-box {
    padding-top: 10px;
    // border:  1px solid #eee;
    margin-bottom: 20px;
    height: 50px;
  }
}
</style>

